<template>
	<div class="divBox">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<div class="container">
					<el-form inline size="small" :model="from" ref="from" :label-position="labelPosition"
						label-width="120px">
						<el-row>
							<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
								<el-form-item label="交易员综合配置模板名称：">
									<el-input v-model="from.traderConfigTemplateName" placeholder="请输入交易员综合配置模板名称"
										clearable class="selWidth" />
								</el-form-item>
								<el-form-item label="交易员综合配置模板编号：">
									<el-input v-model="from.traderConfigTemplateNo" placeholder="请输入交易员综合配置模板编号"
										clearable class="selWidth" />
								</el-form-item>
								<el-form-item label="是否默认模板：">
									<el-select v-model="from.isDefault" placeholder="请选择" class="selWidth" clearable>
										<el-option :value="1" label="是"></el-option>
										<el-option :value="2" label="否"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="状态：">
									<el-select v-model="from.status" placeholder="请选择" class="selWidth" clearable>
										<el-option :value="1" label="启用"></el-option>
										<el-option :value="2" label="禁用"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right from">
								<el-form-item>
									<el-button class="mr10" icon="el-icon-search" size="small" type="primary" @click="search()">搜索</el-button>
									<el-button class="mr10" icon="el-icon-refresh" size="small" @click="reset()">重置</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div class="btn_bt">
					<el-button class="mr10" icon="el-icon-circle-plus-outline" size="small" type="primary" @click="add()">新增</el-button>
					<el-button class="mr10" icon="el-icon-delete" size="small" type="danger" @click="allDel()">删除</el-button>
					<el-button class="mr10" icon="el-icon-top" size="small" @click="exportTable()">导出表格</el-button>
				</div>
			</div>
			<el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
				@selection-change="onSelectTab" highlight-current-row>
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="id" label="ID" min-width="80" />
				<el-table-column prop="traderConfigTemplateName" label="交易员综合配置模板名称" min-width="80" />
				<el-table-column prop="traderConfigTemplateNo" label="交易员综合配置模板编号" min-width="80" />
				<el-table-column prop="isDefault" label="是否默认模板" min-width="80">
					<template slot-scope="scope">
						<el-button size="mini" v-if="scope.row.isDefault == 1">是</el-button>
						<el-button size="mini" v-if="scope.row.isDefault == 2">否</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" min-width="80">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" v-if="scope.row.status == 1">启用</el-button>
						<el-button type="info" size="mini" v-if="scope.row.status == 2">禁用</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" min-width="100" />
				<el-table-column prop="createTime" label="创建时间" min-width="150" />
				<el-table-column label="操作" min-width="200" fixed="right" align="center">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="handleDetails(scope.row)">交易员配置信息</el-button>
						<el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="block">
				<el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
					@size-change="handleSizeChange" @current-change="pageChange" />
			</div>
		</el-card>

		<el-dialog :visible.sync="visible" width="640px">
			<el-table border :data="traderConfigInfoVoList"  style="width: 100%">
				<el-table-column label="类型">
					<template slot-scope="scope">
						<span v-if="scope.row.traderConfigType == 1">转额度手续费率</span>
						<span v-if="scope.row.traderConfigType == 2">佣金日结比率</span>
						<span v-if="scope.row.traderConfigType == 3">佣金周结比率</span>
						<span v-if="scope.row.traderConfigType == 4">佣金月结比率</span>
						<span v-if="scope.row.traderConfigType == 5">转存概率宝年比率</span>
					</template>
				</el-table-column>
				<el-table-column label="费率">
					<template slot-scope="scope">
						<el-input v-model="scope.row.fee*100" :disabled="true">
							<template slot="append">%</template>
						</el-input>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<el-dialog :title="ruleForm.id?'编辑':'新增'" :visible.sync="dialogVisible" width="650px"
			:close-on-click-modal="false" :close-on-press-escape="false">
			<el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="200px">
				<el-form-item label="交易员综合配置模板名称：" prop="traderConfigTemplateName">
					<el-input v-model="ruleForm.traderConfigTemplateName"></el-input>
				</el-form-item>
				<el-form-item label="交易员综合配置模板编号：" prop="traderConfigTemplateNo">
					<el-input v-model="ruleForm.traderConfigTemplateNo"></el-input>
				</el-form-item>
				<el-form-item label="交易员配置信息：" prop="traderConfigInfoVoList">
				  <el-table border :data="ruleForm.traderConfigInfoVoList" border style="width: 100%">
				    <el-table-column prop="traderConfigType" label="类型">
						<template slot-scope="scope">
							<span v-if="scope.row.traderConfigType == 1">转额度手续费率</span>
							<span v-if="scope.row.traderConfigType == 2">佣金日结比率</span>
							<span v-if="scope.row.traderConfigType == 3">佣金周结比率</span>
							<span v-if="scope.row.traderConfigType == 4">佣金月结比率</span>
							<span v-if="scope.row.traderConfigType == 5">转存概率宝年比率</span>
						</template>
				    </el-table-column>
				    <el-table-column label="费率">
				      <template slot-scope="scope">
				      	<el-input v-model="scope.row.fee">
				      		<template slot="append">%</template>
				      	</el-input>
				      </template>
				    </el-table-column>
				  </el-table>
				</el-form-item>
				<el-form-item label="是否默认模板：">
					<el-radio-group v-model="ruleForm.isDefault">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="2">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="状态：">
					<el-radio-group v-model="ruleForm.status">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="2">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注：">
					<el-input type="textarea" v-model="ruleForm.remark"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="close()">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import {
		traderconfigtemplateList,
		traderconfigtemplateSave,
		traderconfigtemplateInfo,
		traderconfigtemplateUpdate,
		traderconfigtemplateDelete,
		traderconfigtemplateExport
	} from '@/api/agent'
	export default {
		name: 'traderconfigtemplate',
		data() {
			return {
				labelPosition: 'right',
				from: {
					traderConfigTemplateName: '',
					traderConfigTemplateNo: '',
					isDefault: '',
					status: 1,
					page: 1,
					limit: 15,
				},
				loading: false,
				tableData: {
					data: [],
					total: 0
				},
				selection: [],
				dialogVisible: false,
				visible: false,
				traderConfigInfoVoList: [],
				ruleForm: {
					id: '',
					traderConfigTemplateName: '',
					traderConfigTemplateNo: '',
					traderConfigInfoVoList: [{
							traderConfigType: 1,
							fee: ''
						},
						{
							traderConfigType: 2,
							fee: ''
						},
						{
							traderConfigType: 3,
							fee: ''
						},
						{
							traderConfigType: 4,
							fee: ''
						},
						{
							traderConfigType: 5,
							fee: ''
						}
					],
					isDefault: '',
					status: 1,
					remark: '',
				},
				rules: {
					traderConfigTemplateName: [{
						required: true,
						message: '请填写交易员综合配置模板名称',
						trigger: 'blur'
					}],
					traderConfigTemplateNo: [{
						required: true,
						message: '请填写交易员综合配置模板编号',
						trigger: 'blur'
					}],
				}
			}
		},
		mounted() {
			this.getlist()
		},
		methods: {
			search() {
				console.log(this.from)
				this.from.page = 1
				this.from.limit = 15
				this.getlist()
			},
			reset() {
				this.from = {
					traderConfigTemplateName: '',
					traderConfigTemplateNo: '',
					isDefault: '',
					status: 1,
					page: 1,
					limit: 15,
				}
				this.getlist()
			},
			getlist() {
				this.loading = true
				traderconfigtemplateList(this.from).then(res => {
					console.log(res)
					this.tableData.data = res.list
					this.tableData.total = res.total
					this.loading = false
				}).catch(err => {
					console.log(err)
					this.loading = false
				})
			},
			add() {
				this.ruleForm = {
					id: '',
					traderConfigTemplateName: '',
					traderConfigTemplateNo: '',
					traderConfigInfoVoList: [{
							traderConfigType: 1,
							fee: ''
						},
						{
							traderConfigType: 2,
							fee: ''
						},
						{
							traderConfigType: 3,
							fee: ''
						},
						{
							traderConfigType: 4,
							fee: ''
						},
						{
							traderConfigType: 5,
							fee: ''
						}
					],
					isDefault: '',
					status: 1,
					remark: '',
				}
				this.dialogVisible = true
			},
			close() {
				this.ruleForm = {
					id: '',
					traderConfigTemplateName: '',
					traderConfigTemplateNo: '',
					traderConfigInfoVoList: [{
							traderConfigType: 1,
							fee: ''
						},
						{
							traderConfigType: 2,
							fee: ''
						},
						{
							traderConfigType: 3,
							fee: ''
						},
						{
							traderConfigType: 4,
							fee: ''
						},
						{
							traderConfigType: 5,
							fee: ''
						}
					],
					isDefault: '',
					status: 1,
					remark: '',
				}
				this.dialogVisible = false
			},
			submit() {
				this.$refs['ruleForm'].validate((valid) => {
					if (valid) {
						if (this.ruleForm.id) {
							console.log('编辑', this.ruleForm)
							let data = {
								id: this.ruleForm.id,
								traderConfigTemplateName: this.ruleForm.traderConfigTemplateName,
								traderConfigTemplateNo: this.ruleForm.traderConfigTemplateNo,
								traderConfigInfoVoList: this.ruleForm.traderConfigInfoVoList,
								isDefault: this.ruleForm.isDefault,
								status: this.ruleForm.status,
								remark: this.ruleForm.remark,
							}
							data.traderConfigInfoVoList.forEach(item=>{
								item.fee = Number(item.fee)/100
							})
							traderconfigtemplateUpdate(data).then(res => {
								console.log(res)
								this.close()
								this.$message.success('编辑成功')
								this.getlist()
							}).catch(err => {
								console.log(err)
								this.$message.error(err)
							})
						} else {
							console.log('新增', this.ruleForm)
							let data = {
								traderConfigTemplateName: this.ruleForm.traderConfigTemplateName,
								traderConfigTemplateNo: this.ruleForm.traderConfigTemplateNo,
								traderConfigInfoVoList: this.ruleForm.traderConfigInfoVoList,
								isDefault: this.ruleForm.isDefault,
								status: this.ruleForm.status,
								remark: this.ruleForm.remark,
							}
							data.traderConfigInfoVoList.forEach(item=>{
								item.fee = Number(item.fee)/100
							})
							traderconfigtemplateSave(data).then(res => {
								console.log(res)
								this.close()
								this.$message.success('新增成功')
								this.getlist()
							}).catch(err => {
								console.log(err)
								this.$message.error(err)
							})
						}
					} else {
						this.$message.error('请填写完整信息')
					}
				});
			},
			// 选择
			onSelectTab(selection) {
				this.selection = []
				selection.forEach(item => {
					this.selection.push(item.id)
				})
				console.log(this.selection)
			},
			allDel() {
				if (this.selection.length == 0) {
					return this.$message.error('至少选择一项')
				}
				console.log(this.selection)
				this.$confirm('确认删除？')
					.then(_ => {
						traderconfigtemplateDelete(this.selection).then(res => {
							console.log(res)
							this.$message.success('删除成功')
							this.getlist()
						}).catch(err => {
							console.log(err)
							this.$message.error(err)
						})
					})
					.catch(_ => {});
			},
			exportTable() {
				traderconfigtemplateExport(this.from).then(res => {
					console.log('导出表格', res)
					window.open(res.filename);
				}).catch(err => {
					console.log(err)
					this.$message.error(err)
				})
			},
			handleDetails(row) {
				traderconfigtemplateInfo(row.id).then(res => {
					console.log('详情', res)
					this.traderConfigInfoVoList = res.traderConfigInfoVoList
					this.visible = true
				}).catch(err => {
					console.log(err)
					this.$message.error(err)
				})
			},
			handleEdit(row) {
				console.log('编辑', row)
				traderconfigtemplateInfo(row.id).then(res => {
					console.log('详情', res)
					res.traderConfigInfoVoList.forEach(item=>{
						item.fee = Number(item.fee)*100
					})
					this.ruleForm = {
						id: res.id,
						traderConfigTemplateName: res.traderConfigTemplateName,
						traderConfigTemplateNo: res.traderConfigTemplateNo,
						traderConfigInfoVoList: res.traderConfigInfoVoList,
						isDefault: Number(res.isDefault),
						status: Number(res.status),
						remark: res.remark,
					}
					this.dialogVisible = true
				}).catch(err => {
					console.log(err)
					this.$message.error(err)
				})
			},
			handleDel(row) {
				this.$confirm('确认删除？')
					.then(_ => {
						console.log('删除', row)
						traderconfigtemplateDelete([row.id]).then(res => {
							console.log(res)
							this.$message.success('删除成功')
							this.getlist()
						}).catch(err => {
							console.log(err)
							this.$message.error(err)
						})
					})
					.catch(_ => {});
			},
			pageChange(page) {
				this.from.page = page
				this.getlist()
			},
			handleSizeChange(val) {
				this.from.limit = val
				this.getlist()
			}
		}
	}
</script>

<style scoped lang="scss">
	.btn_bt {
		border-top: 1px dashed #ccc;
		padding-top: 20px;
	}
</style>
